{% site "test" %}
<!DOCTYPE html>
<html class="google" lang="en">
  <script>
    (function(H){H.className=H.className.replace(/\bgoogle\b/,'google-js')})(document.documentElement)
  </script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-41133141-6', 'auto');
    ga('send', 'pageview');

  </script>
  <meta charset="utf-8">
  <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
  <title>Google Helpouts</title>
  <link href="img/favicon.png" rel="icon" type="image/png" />
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,600,700&lang=en" rel="stylesheet">
  <link href="css/style-consumer.css" rel="stylesheet">
  <!-- header -->
  <div id="header" class="stage">
    <a href="/partner/landing/"><img src="img/google_helpouts_logo_large.png" alt="Google Helpouts"/></a>
  </div>
  <!-- hero -->
  <div id="hero" class="stage">
    <div class="cols">
      <div class="col-6">
        <h2>Developers<br/>with Questions,<br/>Meet Experts<br/>with Answers</h2>
      </div>
    </div>
  </div>
  <!-- section 1 -->
  <div class="body-content cols">
    <div class="col-12">
      <h1>Why Use Helpouts?</h1>
    </div>
    <div class="col-4 aux-3">
      <img src="img/illustration_on_demand.png" class="img-1"/>
      <h3>On-Demand</h3>
      <p>Instant access to programming advice so you can get help quickly and get back to coding.</p>
    </div>
    <div class="col-4 aux-3">
      <img src="img/illustration_experts.png" class="img-2"/>
      <h3>Expert</h3>
      <p>Developers from the programming community are reviewed and rated when they give Helpouts.</p>
    </div>
    <div class="col-4 aux-3">
      <img src="img/illustration_personal.png" class="img-3"/>
      <h3>Personal</h3>
      <p>Help that's tailored to your code and specific to your problem.</p>
    </div>
  </div>
  <!-- section 2 -->
  <div class="body-content cols" id="step-section">
    <div class="col-12">
      <h1>How it Works</h1>
    </div>
    <div class="col-12" id="step-img">
      <img
        class="step-images active"
        data-img-mob="img/mobile_consumer_step_01.gif"
        id="img-step-1"
        src="img/consumer_step_01.gif"
      />
      <img
        class="step-images"
        data-img-mob="img/mobile_consumer_step_02.gif"
        id="img-step-2"
        src="img/consumer_step_02.gif"
      />
      <img
        class="step-images"
        data-img-mob="img/mobile_consumer_step_03.jpg"
        id="img-step-3"
        src="img/consumer_step_03.jpg"
      />
      <img
        class="step-images"
        data-img-mob="img/mobile_consumer_step_04.jpg"
        id="img-step-4"
        src="img/consumer_step_04.jpg"
      />
    </div>
    <div class="col-3 step active" id="step-1">
      <div class="step-highlight">
        <div class="bullet-bubble">1</div>
        <div class="bullet-text">
          <p>Find the Helpouts logo on a programming partner site</p>
        </div>
      </div>
    </div>
    <div class="col-3 step" id="step-2">
      <div class="step-highlight">
        <div class="bullet-bubble">2</div>
        <div class="bullet-text">
          <p>Get matched with a developer who has the skills to help you</p>
        </div>
      </div>
    </div>
    <div class="col-3 step" id="step-3">
      <div class="step-highlight">
        <div class="bullet-bubble">3</div>
        <div class="bullet-text">
          <p>Start a one-on-one chat to clarify and diagnose your problem</p>
        </div>
      </div>
    </div>
    <div class="col-3 step" id="step-4">
      <div class="step-highlight">
        <div class="bullet-bubble">4</div>
        <div class="bullet-text">
          <p>Turn on screenshare or voice to make it easier to debug your code</p>
        </div>
      </div>
    </div>
    <div class="col-2 mobile-only" id="button-left">
      <img src="img/slide_control_left.png" />
      <p>PREVIOUS</p>
    </div>
    <div class="col-2 mobile-only" id="button-right">
      <img src="img/slide_control_right.png" />
      <p>NEXT</p>
    </div>
  </div>
  <!-- section 3 -->
  <div class="body-content cols" id="partners">
    <div class="col-12">
      <h1>Get Help</h1><br/>
      <h4>Visit one of our programming partners to get started with a Helpout.</h4>
    </div>
    <div class="col-4">
      <a href="//developers.google.com/?utm_source=Helpouts_webpage&utm_medium=website&utm_campaign=consumer_page"><img src="img/google_developers_logo.png" class="img-6"/></a>
      <p>The official site for Google Developers.</p><br/>

      <p><strong>BETA PARTNER</strong></p>
    </div>
    <div class="col-4">
      <a href="//www.xda-developers.com/?utm_source=Helpouts_webpage&utm_medium=website&utm_campaign=consumer_page"><img src="img/logo_xda_developers.png" class="img-5"/></a>
      <p>For developers who want to make the most of their mobile devices.</p>
      <p><strong>COMING SOON</strong></p>
    </div>
    <div class="col-4">
      <a href="//www.codeproject.com/?utm_source=Helpouts_webpage&utm_medium=website&utm_campaign=consumer_page"><img src="img/logo_codeproject.png" class="img-4"/></a>
      <p>Open source code tutorials for software developers and architects.</p>
      <p><strong>COMING SOON</strong></p>
    </div>
  </div>
  <!-- section 4 -->
  <div class="body-content cols" id="faq">
    <div class="col-12">
      <h1>Frequently Asked Questions</h1>
    </div>
    <div class="col-4">
      <h5>Who are these experts?</h5>
      <p>Google Helpouts is a platform that connects people with questions to experts with answers. We're working with programming websites and developers from well-known developer communities to help you get the programming answers you need.</p>
    </div>
    <div class="col-4">
      <h5>How will I connect with an expert?</h5>
      <p>We'll identify developers who have the skills to respond to your question. We'll then prompt you to leave your phone number and/or email, and you'll receive a notification when a developer can help. Currently, Helpouts is only available in the U.S.</p>
    </div>
    <div class="col-4">
      <h5>How much do Helpouts cost?</h5>
      <p>At this time, programming Helpouts initiated from one of our partner websites are free. Developers who answer your questions give back to the programming community by offering their help.</p>
    </div>
    <div class="col-12">
      <a href="//support.google.com/helpouts/?p=partnersites_faq">VISIT OUR HELP CENTER FOR MORE FAQS</a>
    </div>
  </div>
  <!-- footer -->
  <div id="footer" class="cols">
    <div class="footer-1">
      <img src="img/footer_icon_large.png"/>
    </div>
    <div class="footer-2">
      <p>
        <a href="//support.google.com/helpouts/#contact=1">Contact&nbsp;Us</a>
        <a href="//support.google.com/helpouts">Help&nbsp;Center</a>
        <a href="/" class="desktop-only">Visit Helpouts Marketplace</a>
        <a href="/partner/checkin/consumer" class="desktop-only">View Helpouts Inbox</a>
        <a href="/partner/checkin/consumer" class="mobile-only-inline">Inbox</a>
      </p>
    </div>
  </div>
  <script src="js/steps.js"></script>